<template>
  <div style="margin-bottom: 20px;">
    <el-card class="box-card" body-style="padding:0px">
      <div slot="header" class="clearfix">
        <span>社区戒毒</span>
      </div>
      <el-form ref="form" :model="form">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="选择展示列" label-class-name="labelBg">
            <el-checkbox-group v-model="form.modalCheckList">
              <el-checkbox
                v-for="(item, index) in dictList"
                :key="index"
                :label="item.dictValue"
              >{{ item.dictLabel }}</el-checkbox>
            </el-checkbox-group>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          prop="num"
          :label="item.label"
          style="color:red"
          width="150"
        >
          <template slot-scope="scope">
            <span style="color:red;cursor: pointer;" @click="toOpenModal">{{ scope.row.num }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <ModalEl ref="modalRef" :dict-type="dictType" />
  </div>
</template>
<script>
import { getDicts as getDicts } from '@/api/system/dict/data'
import ModalEl from './modal.vue'
export default {
  components: {
    ModalEl
  },
  props: ['checkList', 'dictType', 'currentTime'],
  data() {
    return {
      form: {
        modalCheckList: []
      },
      dictList: [],
      tableData: [{ num: 10 }, { num: 20 }],
      columns: []
    }
  },
  watch: {
    currentTime: {
      deep: true,
      handler: function() {
        this.getColumns()
      }
    }
  },
  mounted() {
    getDicts(this.dictType).then(response => {
      this.dictList = response.data
      this.getColumns()
    })
  },
  methods: {
    getColumns() {
      const newColums = []
      if (this.dictList.length > 0) {
        for (let i = 0; i < this.checkList.length; i++) {
          const item = this.dictList.find(v => v.dictValue == this.checkList[i])
          if (item) {
            newColums.push({
              label: item.dictLabel
            })
          }
        }
      }
      this.columns = newColums
    },
    toOpenModal() {
      if (this.form.modalCheckList.length == 0) {
        return this.$message({
          message: '请选择展示列',
          type: 'warning'
        })
      }
      this.$refs['modalRef'].openModal(this.form.modalCheckList)
    }
  }
}
</script>
